<template>
  <div class="app-main-container">
    <!-- <div class="app-main-title">应用中心</div> -->
    <div v-for="(item, index) in list" :key="index" class="yyBox">
      <template>
        <div class="yyTile">{{ item.cateGoryName }}</div>
        <div class="yyUl">
          <template
            v-for="(em, indexs) in item.serList"
          >
            <div
              v-if="em.display == '1'"
              :key="indexs"
              class="yyLi pointer"
              @click="jump(em)"
            >
              <templalte>
                <div class="jb">
                  <img v-if="em.openStatus == 0" src="@/icons/png/ic_kaitong.png">
                  <img v-if="em.openStatus != 0 && em.tag == 2" src="@/icons/png/ic_new.png">
                  <img v-if="em.openStatus != 0 && em.tag == 1" src="@/icons/png/ic_hot.png">
                </div>
                <div class="df_ac">
                  <div class="left">
                    <img :src="em.imgUrl">
                  </div>
                  <div class="right">
                    <div class="xbt">{{ em.name }}</div>
                    <div class="jj">{{ em.content }}</div>
                  </div>
                </div>
              </templalte>
              <!-- <div v-if="em.openStatus == 0" class="wkt">未开通</div> -->
            </div>
          </template>
        </div>
      </template>
    </div>
    <el-dialog
      :close-on-click-modal="modalDialog"
      :lose-on-press-escape="modalDialog"
      :title="title"
      :visible.sync="showPop"
      width="800px"
      :before-close="cancel"
    >
      <div class="fwxInfo" v-html="info" />
    </el-dialog>
  </div>
</template>

<script>
import { applicationCenterList } from '@/api'
export default {
  name: 'ApplicationCenter',
  data() {
    return {
      modalDialog: this.$store.state.app.dialog,
      list: [],
      meta: [],
      title: '',
      showPop: false,
      listLoading: true,
      info: null
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList()
  },
  methods: {
    // 获取场馆列表
    getList() {
      applicationCenterList({
        param: {}
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList || []
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    cancel() {
      this.info = null
      this.showPop = false
    },
    jump(e) {
      if (e.name === '精彩瞬间') {
        this.$router.push({
          path: e.pageUrl,
          query: {
            code: e.code || ''
          }
        })
      }
      if (e.pageUrl && e.openStatus === '1') {
        this.$router.push(e.pageUrl)
      } else if (e.info && e.openStatus === '0') {
        this.showPop = true
        this.title = e.cateGoryName
        this.info = e.info
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.yyBox {
  margin-bottom: 20px;
  .yyTile {
    font-size: 18px;
    color: $primaryColor;
    font-weight: bolder;
  }
  .yyUl {
    display: flex;
    flex-wrap: wrap;
    .yyLi {
      width: 23.5%;
      background-color: rgb(246, 248, 251);
      box-sizing: border-box;
      margin-right: 2%;
      padding: 24px;
      margin-top: 20px;
      align-items: center;
      display: flex;
      position: relative;
      &:nth-of-type(4n) {
        margin-right: 0;
      }
      .left {
        width: 44px;
        height: 44px;
        margin-right: 16px;
        flex: none;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex: 1;
        .xbt {
          font-size: 16px;
          color: #333;
          font-weight: bolder;
          margin-bottom: 10px;
          cursor: pointer;
        }
        .jj {
          cursor: pointer;
          line-height: 1.5;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
          color: #828D9E;
          font-size: 13px;
        }
      }
      .jb {
        width: 48px;
        height: 48px;
        position: absolute;
        top: 0;
        left: 0;
        img {
          width: 100%;
          vertical-align: top;
          height: 100%;
        }
      }
      .wkt {
        width: 70px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        position: absolute;
        background-color: rgb(245, 154, 35);
        color: #fff;
        font-size: 13px;
        text-align: center;
        top: 0;
        right: 0;
      }
    }
  }
}
</style>
